<script setup lang="ts">
import { ref } from 'vue'

import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { payHupijiao } from '@/api/interface/web/pay'
import { payOrdersAdd, payOrdersFindOrder } from '@/api/interface/web/payOrders'
import { generateRandomId } from '@/utils/common'

const fullscreenLoading = ref(false)
const userStore = useUserStore()
const router = useRouter()

const xieyis = ref([
  '软件使用协议',
  '欢迎使用本软件，本软件的使用受以下条款和条件的约束。请仔细阅读本协议，如果您不同意本协议中的任何条款，请不要使用本软件。',
  '1. 授权许可',
  '本软件是由软件开发者授权许可使用的。本软件仅限于您个人非商业的使用。未经软件开发者的明确授权，您不得对本软件进行复制、修改、翻译、发行、租赁、出售、转让或以其他任何方式进行使用或许可。',
  '2. 免责声明',
  '本软件仅供个人非商业使用，软件开发者不对使用本软件产生的任何损失或损害承担任何责任。在适用法律允许的最大范围内，软件开发者对本软件的适用性、质量和准确性都不作任何保证。软件开发者不对本软件中的任何错误、缺陷、瑕疵或其他问题承担任何责任。',
  '3. 知识产权',
  '本软件中的所有知识产权，包括但不限于著作权、商标权、专利权、商业秘密和所有权等，均归软件开发者所有。您不得以任何方式侵犯软件开发者的知识产权。',
  '4. 法律适用',
  '本协议受中华人民共和国法律的管辖。如果本协议中的任何条款被认为是非法、无效或无法执行的，则该条款应被视为自本协议的其余部分中分离出来，并不影响该部分的有效性和可执行性。',
  '5. 协议变更',
  '软件开发者保留随时更改本协议的权利。如果软件开发者对本协议进行修改，您将会在软件中看到相关通知。如果您继续使用本软件，则意味着您接受修改后的协议。',
  '6. 与其他条款的冲突',
  '如果本协议与软件开发者网站上的其他条款或使用条件冲突，则以本协议为准。本软件暂不支持退款, 最终解释权归虎皮椒支付所有。',
])

const vips: any = ref([
  {
    type: '1',
    active: true,
    name: '基础套餐',
    price: 10,
    context1: '15元积分',
  },
  {
    type: '2',
    active: false,
    name: '高级套餐',
    price: 30,
    context1: '30元积分',
  },
  {
    active: false,
    type: '3',
    name: '豪华套餐',
    price: 100,
    context1: '100元积分',
  },
])

const tips: any = ref([])

const codeData: any = ref({})
const showCode = ref(false)
const payVip = async (totalFee: any, type: any) => {
  fullscreenLoading.value = true
  const tradeOrderId = generateRandomId()
  const title = '办理vip' + vips.value.filter((v: any) => v.type == type)[0].name

  payOrdersAdd({
    totalFee,
    title,
    userId: userStore.userInfo.id,
    tradeOrderId,
    status: '0',
  }).then(async () => {
    if (import.meta.env.MODE === 'development') {
      totalFee = 0.01
    }
    let res: any = await payHupijiao({ totalFee, title, tradeOrderId })
    res = JSON.parse(res)
    if (res.errmsg == 'success!') {
      codeData.value = { QRcode_url: res.url_qrcode, title, totalFee }
      showCode.value = true
      timeFindOrder(tradeOrderId)
    } else {
      ElMessage.error('生成验证码失败!')
    }
  })

  fullscreenLoading.value = false
}

const confirmVip = () => {
  const actVip = vips.value.filter((v: any) => v.active)
  const { price, type } = actVip[0]
  if (!userStore.userInfo) {
    ElMessageBox.confirm('充值余额需要登录，是否去登录?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        userStore.setDialogLoginVisible(true)
      })
      .catch(() => {})
  } else {
    if (!actVip.length) {
      ElMessage.error('请选择套餐')
      return false
    }

    payVip(price, type)
  }
}

const actVip = (type: any) => {
  vips.value.forEach((v: any, i: any) => {
    if (v.type == type) {
      vips.value[i].active = true
    } else {
      vips.value[i].active = false
    }
  })
}

const timeInter = ref()
const timeFindOrder = (tradeOrderId: any) => {
  clearInterval(timeInter.value)
  timeInter.value = null
  timeInter.value = setInterval(async function () {
    payOrdersFindOrder({ tradeOrderId, userId: userStore.userInfo.id, status: '1' }).then(
      (res: any) => {
        if (res) {
          showCode.value = false
          ElMessage.success('充值成功!')
          userStore.login({
            ...userStore.userInfo,
            money: res.money,
          })
          clearInterval(timeInter.value)
          timeInter.value = null
          goIndex()
        }
      },
    )
  }, 4000)
}

const deforeCloseCode = (done: any) => {
  clearInterval(timeInter.value)
  timeInter.value = null
  done()
}

const showXieYi = ref(false)
const showXieYiFun = () => {
  showXieYi.value = true
}

const goIndex = () => {
  router.push({ path: '/home' })
}
</script>
<template>
  <div class="vip-box" v-loading.fullscreen="fullscreenLoading">
    <div class="go-index" @click="goIndex">
      <el-icon :size="23"><Back /></el-icon><span>返回首页</span>
    </div>

    <div class="vip-center">
      <div class="vip-header">
        <div class="vip-header-left">
          <img src="/images/zhuanshi-red.png" alt="" class="icon" />
          <div class="title">充值余额</div>
        </div>
        <div class="xieyi-box">
          <div class="text" @click="showXieYiFun">使用协议</div>
        </div>
      </div>
      <div class="vip-content">
        <div class="header">
          <div
            :class="{ 'vip-item': true, active: item.active }"
            :id="'vip' + item.type"
            v-for="(item, index) in vips"
            :key="index"
            @click="actVip(item.type)"
          >
            <div class="name-box">
              <img v-if="item.type == '1'" src="/images/zhuanshi-green.png" alt="" class="icon" />
              <img v-if="item.type == '2'" src="/images/zhuanshi-red.png" alt="" class="icon" />
              <img v-if="item.type == '3'" src="/images/zhuanshi-yellow.png" alt="" class="icon" />
              <div class="name">{{ item.name }}</div>
            </div>
            <div class="price-box">
              <img v-if="item.type == '1'" src="/images/jinbi-green.png" alt="" class="icon" />
              <img v-if="item.type == '2'" src="/images/jinbi-red.png" alt="" class="icon" />
              <img v-if="item.type == '3'" src="/images/jinbi-yellow.png" alt="" class="icon" />
              <div class="price">{{ item.price }}元</div>
            </div>
            <!-- <div class="context">{{ item.context1 }}</div> -->

            <div class="context">{{ item.context2 }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="tip-box">
      <ul class="tip-box-content">
        <li v-for="(item, index) in tips" :key="index" class="tip-item">
          {{ item.label }}
        </li>
      </ul>
      <el-button type="primary" class="open-btn" size="large" @click="confirmVip"
        >充值余额</el-button
      >
    </div>

    <!-- 支付二维码 -->
    <el-dialog
      :append-to-body="true"
      v-model="showCode"
      class="code-diao"
      :close-on-click-modal="false"
      :before-close="deforeCloseCode"
      width="400px"
    >
      <div class="code-pc-box">
        <img class="weixin-logo" src="/images/wechat-logo.png" alt="" />
        <div class="title">{{ codeData.title }}</div>
        <div class="price">￥{{ codeData.totalFee }}元</div>
        <img style="width: 230px; height: 230px" :src="codeData.QRcode_url" alt="" />
        <div class="tip">请打开微信app二维码扫一扫支付</div>
      </div>
    </el-dialog>

    <!-- 协议 -->
    <el-dialog :append-to-body="true" v-model="showXieYi" class="code-diao" width="600px">
      <div class="xieyis-box">
        <div class="xieyi-item" v-for="(item, index) in xieyis" :key="index">
          {{ item }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.vip-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  @include flex(column, flex-start, center);

  .open-btn {
    margin-right: 20px;
    width: 121px;
  }

  .vip-center {
    width: 1200px;
    padding: 0;
    border: 1px solid rgba(231, 234, 243, 0.7);
    border-radius: 10px;
    margin-top: 30px;
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .vip-header {
    width: 100%;
    height: 50px;
    padding: 20px;
    box-sizing: border-box;
    @include flex(row, space-between, center);
    border-bottom: 1px solid rgba(231, 234, 243, 0.7);

    .vip-header-left {
      @include flex(row, flex-start, center);
    }

    .icon {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
  }
  .vip-content {
    width: 100%;
  }

  .vip-bottom {
    padding-bottom: 20px;
    @include flex(row, space-between, center);
    .tip-box {
      color: #1e1f20 !important;
      padding-left: 40px;
      font-weight: bold;
      font-size: 16px;

      .tip-item {
        margin-bottom: 10px;
      }
    }
  }
  .header {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    @include flex(row, flex-start, center);

    .vip-item {
      width: 230px;
      height: 160px;
      transition: all 0.3s;
      padding: 10px;
      padding-top: 30px;
      padding-bottom: 30px;
      margin-right: 24px;
      border: 2px solid transparent;
      border-radius: 10px;
      background-color: #fff;
      transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
      box-shadow: 0 0 3px rgb(0 0 0 / 15%) !important;
      cursor: pointer;
      box-sizing: border-box;

      .name-box {
        @include flex(row, center, center);
        margin-bottom: 20px;
        .name {
          font-weight: bold;
          font-size: 22px;
          color: #9b9b9b;
        }
        .icon {
          width: 27px;
          height: 27px;
          margin-right: 5px;
        }
      }

      .price-box {
        @include flex(row, center, center);
        margin-bottom: 10px;

        .price {
          font-weight: bold;
          font-size: 18px;
          color: #9b9b9b;
        }
        .icon {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }

      .context {
        @include flex(row, center, center);
        // color: #6c757d;
        font-size: 14px;
        margin-bottom: 10px;
        color: #9b9b9b;
      }
    }

    .vip-item:last-child {
      margin-right: 0;
    }

    .vip-item#vip1 {
      .name-box {
        .name {
          color: #009788;
        }
      }

      .price-box {
        .price {
          color: #009788;
        }
      }

      .context {
        color: #009788;
      }
    }

    .vip-item#vip1:hover {
      border: 3px solid #8ae5dc;
    }

    .vip-item#vip1.active {
      border: 3px solid #8ae5dc;
    }

    .vip-item#vip2 {
      .name-box {
        .name {
          color: #f96300;
        }
      }

      .price-box {
        .price {
          color: #f96300;
        }
      }

      .context {
        color: #f96300;
      }
    }

    .vip-item#vip2:hover {
      border: 3px solid #ffc62c;
    }

    .vip-item#vip2.active {
      border: 3px solid #ffc62c;
    }

    .vip-item#vip3 {
      .name-box {
        .name {
          color: #ffd100;
        }
      }

      .price-box {
        .price {
          color: #ffd100;
        }
      }

      .context {
        color: #ffd100;
      }
    }

    .vip-item#vip3:hover {
      border: 3px solid #f8e177;
    }

    .vip-item#vip3.active {
      border: 3px solid #f8e177;
    }
  }

  .go-index {
    width: 1200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-top: 30px;

    .el-icon {
      margin-right: 5px;
    }
  }
  .vip-center {
    .vip-header-left {
      .title {
        font-size: 16px;
      }
    }
  }
}
.tip-box {
  width: 1200px;
  height: 180px;
  padding: 0;
  border: 1px solid rgba(231, 234, 243, 0.7);
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: #fff;
  color: #1e1f20 !important;
  font-weight: bold;
  font-size: 16px;
  border-top: 0;
  @include flex(row, space-between, center);

  .tip-item {
    margin-bottom: 10px;
  }

  .open-btn {
    background: linear-gradient(83.15deg, #f67a01 3.74%, #eb5701 103.11%);
    border: 0;
  }

  .open-btn:hover {
    background: linear-gradient(83.15deg, #fd840b 3.74%, #fc6711 103.11%);
  }
}
</style>
<style lang="scss">
.xieyi-box {
  display: flex;
  align-items: center;
  margin-left: 20px;
  .text {
    font-size: 14px;
    margin-left: 10px;
    opacity: 0.8;
    cursor: pointer;
  }
}
.xieyis-box {
  .xieyi-item {
    margin-bottom: 10px;
  }
}
.code-diao {
  border-radius: 10px;
  .el-dialog__body {
    padding-top: 0;
  }
  .el-dialog__headerbtn {
    font-size: 25px;
  }
  .code-pc-box {
    width: 360px;
    padding-top: 25px;
    border-radius: 10px;
    background-color: #fff;
    @include flex(column, center, center);

    .weixin-logo {
      margin-bottom: 15px;
    }

    .title {
      margin-bottom: 10px;
      font-size: 16px;
    }

    .price {
      margin-bottom: 10px;
      font-size: 22px;
    }

    .tip {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
